{% extends 'base.html' %}
{% load static %}

{% block title %}设备管理 - IoT智能家居控制系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <!-- 页面标题和操作按钮 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="bi bi-cpu me-2"></i>设备管理</h2>
            <a href="{% url 'devices:device_add' %}" class="btn btn-primary">
                <i class="bi bi-plus-circle me-1"></i>添加设备
            </a>
        </div>

        <!-- 搜索和筛选 -->
        <div class="card mb-4">
            <div class="card-body">
                <form method="get" class="row g-3">
                    <div class="col-md-4">
                        <label for="search" class="form-label">搜索设备</label>
                        <input type="text" class="form-control" id="search" name="search" 
                               value="{{ search_query }}" placeholder="设备名称、品牌或类型">
                    </div>
                    <div class="col-md-3">
                        <label for="status" class="form-label">设备状态</label>
                        <select class="form-select" id="status" name="status">
                            <option value="">全部状态</option>
                            {% for value, label in status_choices %}
                                <option value="{{ value }}" {% if status_filter == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-outline-primary me-2">
                            <i class="bi bi-search me-1"></i>搜索
                        </button>
                        <a href="{% url 'devices:device_list' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-clockwise"></i>
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- 设备列表 -->
        {% if page_obj %}
            <div class="row">
                {% for device in page_obj %}
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="card h-100">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h6 class="card-title mb-0">
                                    <i class="bi bi-cpu me-1"></i>{{ device.name }}
                                </h6>
                                <span class="badge bg-{% if device.status == 'online' %}success{% elif device.status == 'offline' %}danger{% else %}warning{% endif %}">
                                    {{ device.get_status_display }}
                                </span>
                            </div>
                            <div class="card-body">
                                <div class="row text-muted small mb-3">
                                    <div class="col-6">
                                        <i class="bi bi-tag me-1"></i>{{ device.brand.name }}
                                    </div>
                                    <div class="col-6">
                                        <i class="bi bi-collection me-1"></i>{{ device.device_type.name }}
                                    </div>
                                </div>
                                
                                {% if device.model %}
                                    <p class="text-muted small mb-2">
                                        <i class="bi bi-info-circle me-1"></i>型号：{{ device.model }}
                                    </p>
                                {% endif %}
                                
                                {% if device.location %}
                                    <p class="text-muted small mb-2">
                                        <i class="bi bi-geo-alt me-1"></i>位置：{{ device.location }}
                                    </p>
                                {% endif %}
                                
                                {% if device.ip_address %}
                                    <p class="text-muted small mb-2">
                                        <i class="bi bi-router me-1"></i>IP：{{ device.ip_address }}
                                    </p>
                                {% endif %}
                                
                                {% if device.description %}
                                    <p class="text-muted small">{{ device.description|truncatechars:50 }}</p>
                                {% endif %}
                            </div>
                            <div class="card-footer">
                                <div class="btn-group w-100" role="group">
                                    <a href="{% url 'devices:device_detail' device.id %}" 
                                       class="btn btn-outline-primary btn-sm">
                                        <i class="bi bi-eye me-1"></i>详情
                                    </a>
                                    <a href="{% url 'devices:device_edit' device.id %}" 
                                       class="btn btn-outline-secondary btn-sm">
                                        <i class="bi bi-pencil me-1"></i>编辑
                                    </a>
                                    {% if device.status == 'online' %}
                                        <button type="button" class="btn btn-outline-success btn-sm" 
                                                onclick="controlDevice({{ device.id }}, 'toggle')">
                                            <i class="bi bi-power me-1"></i>控制
                                        </button>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            <!-- 分页 -->
            {% if page_obj.has_other_pages %}
                <nav aria-label="设备列表分页">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                                    <i class="bi bi-chevron-double-left"></i>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                                    <i class="bi bi-chevron-left"></i>
                                </a>
                            </li>
                        {% endif %}

                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                                <li class="page-item active">
                                    <span class="page-link">{{ num }}</span>
                                </li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">{{ num }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                                    <i class="bi bi-chevron-right"></i>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                                    <i class="bi bi-chevron-double-right"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        {% else %}
            <!-- 空状态 -->
            <div class="text-center py-5">
                <i class="bi bi-cpu display-1 text-muted"></i>
                <h4 class="text-muted mt-3">暂无设备</h4>
                <p class="text-muted">您还没有添加任何设备，点击上方按钮开始添加设备。</p>
                <a href="{% url 'devices:device_add' %}" class="btn btn-primary">
                    <i class="bi bi-plus-circle me-1"></i>添加第一个设备
                </a>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function controlDevice(deviceId, command) {
    if (confirm('确定要执行此操作吗？')) {
        fetch(`/devices/${deviceId}/control/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            body: JSON.stringify({
                command: command,
                parameters: {}
            })
        })
        .then(function(response) { return response.json(); })
        .then(function(data) {
            if (data.success) {
                alert('操作成功：' + data.message);
                location.reload();
            } else {
                alert('操作失败：' + data.message);
            }
        })
        .catch(function(error) {
            console.error('Error:', error);
            alert('操作失败，请稍后重试');
        });
    }
}
</script>
{% endblock %}